<template>
 <div id="footer">
   <div class="center">
     <div class="welcome">
       WELCOME
     </div>
     <div class="nav">
      <router-link to="/">主页</router-link>
      <router-link to="/journal">历史文化</router-link>
      <router-link to="/album">艺术产品</router-link>
      <router-link to="/share">地点景区</router-link>
      <router-link to="/personal">个人中心</router-link>
     </div>
     <p class="vr"></p>
     <div class="email">
       <p>QQ:2719382032</p>
       <p> 联系电话：020-000000    000-000000</p>
       <p>联系邮箱：xxx@.co.m</p>
       <p>联系地址：XXX省XXX市XXX县XXX路</p>
     </div>
   </div>
 </div>
</template>
 
<script>
export default {
  name: 'FooterNav',
}
</script>

<style scoped lang='less'>
#footer{
  width: 100%;
  height: 280px;
  padding:20px 0;
  margin-top: 20px;
  background-color: #222222;
  position: relative;
  .center{
    margin: auto;
    width: 1200px;
    .welcome{
      color: rgb(255, 192, 1);
      font-size: 24px;
      height: 280px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      margin: 30px auto;
    }
    .nav{
      font-size: 16px;
      width: 690px;
      height: 40px;
      display: flex;
      line-height: 40px;
      margin: 20px auto;
      margin-bottom: 30px;
      justify-content: space-evenly;
      a{
        color: #444444;
        text-decoration: none;
      }
    }
    .vr{
      width: 100%;
      height: 1px;
      background-color: #444; 
      margin-bottom: 50px;
      position: relative;
    }
    .email{
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: space-between;
      color: #444444;
      font-size: 14px;
    }
  }

}
</style>